import React from 'react';
import { Link } from 'react-router';
import { Button,message,Icon,Badge,Menu,Dropdown,Tooltip } from 'antd';
import {logout,API_URL,PORTRAIT} from '../store/actions'
import {connect} from 'react-redux';
class Header extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            title: '互联网影像数据中心',
            notice:true,
            hash:this.props.hash
        };
        this.logout = this.logout.bind(this);
        this.userInfo = this.userInfo.bind(this)
    }
    componentWillReceiveProps(nextProp){
        this.setState({
            user: nextProp.user
        })
    }
    logout(e){
        e.preventDefault();
        const _this =this;
        _this.props.dispatch(logout(function(){
            _this.props._r.push('/login');
          console.log('成功退出')
            message.success('已经安全退出登录',1)
        },function(res){
          console.log('失败退出')
            message.warning(res.head.msg,1);
            _this.props._r.push('/login');
        }));
    }
    userInfo(){
        if(this.props.user.accessToken !== ''){
          const user = this.props.user.user,
            isUser = (user.type == 1),
            text= '编辑个人信息',
            showName = user.nickname || user.name || user.username || '--',
            menuItem = (
            <Menu>
              <Menu.Item key="0">
                <Link to={isUser?`/user?pane=1`:`/specUser?pane=1`}>编辑个人信息</Link>
              </Menu.Item>
              <Menu.Divider />
              <Menu.Item key="1">
                <Link to={isUser?`/user?pane=2`:`/specUser?pane=2`}>设置头像</Link>
              </Menu.Item>
              <Menu.Divider />
              <Menu.Item key="2">
                <Link to={isUser?`/user?pane=3`:`/specUser?pane=3`}>修改密码</Link>
              </Menu.Item>
            </Menu>);
            let _userName = '';
            if(isUser){
              _userName = (
              <Tooltip placement="bottom" title={text}>
                <Link to={`/user`}>{showName}</Link>
              </Tooltip>
              )
            }else{
              _userName = (
              <Tooltip placement="bottom" title={text}>
                <Link to={`/specUser`}>{showName}</Link>
              </Tooltip>
              )
            }

            return (
                <div id="headerUser">
                    <div className="userName">
                      {_userName}
                    </div>
                    <a href="#" onClick={this.logout}  className="logoutBtn">退出</a>
                </div>
            )
        }else{
            return ''
        }
    }
    render(){
        return(
            <div id="header">
                <h2>{this.state.title}</h2>
                {this.userInfo()}
            </div>
        )
    }
}


function mapStateToProps(state){
    const {_pages,user} = state.rootReducer;
    return {_pages,user}
}
export default connect(mapStateToProps)(Header)